<template>
	<view class="page">
		<u-navbar bgColor='#4871C0' :titleStyle="{ color: '#FFF'}" :title="navTitle+ '表'" leftIconColor="#FFF"
			@rightClick="rightClick" :rightText="'上' + navTitle" :autoBack="true" @leftClick="leftClick">
		</u-navbar>
		<u-tabs class="tabs topnavs" :list="tabs" key-name="title" :active-style="activeStyle"
			:inactive-style="inactiveStyle" :current="currentTab"
			itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;width:40%;padding-bottom:10rpx;"
			@change="tabChanged">
		</u-tabs>
		<view class="feedback" v-if="currentTab === 0">
			<u-collapse class="collapse" :value="'0'" accordion>
				<u-collapse-item class="collapse_items" v-for="(item,index) in list1" :key="index" :title="item.name"
					:name="index">
					<view v-if="item.week" class="content_jihua">
						<view class="label">本周工作计划</view>
						<view v-if="item.week.leader_content">
							<view class="head">领导交办事项</view>
							<view class="content">
								<text>{{item.week.leader_content}}</text>
							</view>
							<u-divider class="opcity_show"></u-divider>
						</view>
						<view v-if="item.week.end_content">
							<view class="head">完成情况</view>
							<view class="content">
								<text>{{item.week.end_content}}</text>
							</view>
							<u-divider class="opcity_show"></u-divider>
						</view>
						<view v-if="item.week.xiaojie">
							<view class="head">部门工作小结</view>
							<view class="content">
								<text>{{item.week.xiaojie}}</text>
							</view>
							<u-divider class="opcity_show"></u-divider>
						</view>
						<u-icon v-if="item.is_edit == 1" name="edit-pen" class="editbutton" @click="toDetail(item.id)">
						</u-icon>

					</view>
					<view class="content_jihua" v-if="item.week.next_content">
						<view class="label">下周工作计划</view>
						<view class="head">下周工作计划</view>
						<view class="content">
							<text>{{item.week.next_content}}</text>
						</view>
						<u-icon v-if="item.is_edit == 1" name="edit-pen" class="editbutton" @click="toDetail(item.id)">
						</u-icon>
						<u-divider class="opcity_show"></u-divider>
					</view>
					<view class="content_jihua" v-if="item.week.files">
						<view class="label">附件</view>
						<view class="head">附件</view>
						<view class="content">
							<view class="file-box u-flex" @click.stop="handleDownload(item.week.files)">
								<u-icon name="attach" color="#4871C0" size="24"></u-icon>
								<text class="file-content">{{item.week.files.filename}}</text>
							</view>
						</view>
						<u-icon v-if="item.is_edit == 1" name="edit-pen" class="editbutton" @click="toDetail(item.id)">
						</u-icon>
						<u-divider class="opcity_show"></u-divider>
					</view>
				</u-collapse-item>
			</u-collapse>
			<u-empty v-if="!list1.length && !isLoading" mode="data" icon="http://cdn.uviewui.com/uview/empty/car.png">
			</u-empty>
		</view>
		<view class="plan" v-if="currentTab === 1">
			<view class="" v-for="(item,index) in list2" :key="index">
				<view class="date">{{item.date_text}}</view>
				<view class="card" v-for="(zitem,zindex) in item.list" :key="zindex">
					<view class="account">
						<u-avatar :src="zitem.avatar" :size="30"></u-avatar>
						<text class="name">{{zitem.fuzeren}}</text>
					</view>
					<view class="content">
						<view><text class="content-label">牵头部门:&nbsp;&nbsp;</text>{{zitem.department_name}}</view>
						<view><text class="content-label">使用场所:&nbsp;&nbsp;</text><text
								:class="zitem.is_chongtu?'red':''">{{zitem.cangsuo}}{{zitem.use_time}}</text></view>
						<view><text class="content-label">中心计划:&nbsp;&nbsp;</text>{{zitem.zhongxin}}
						</view>
						<view><text class="content-label">备注:&nbsp;&nbsp;</text>{{zitem.remark}}</view>
						<view class="image" v-if="zitem.images" style="margin-top: 10rpx;">
							<u-image v-for="(sitem,sindex) in zitem.images" :key="sindex" :src="sitem.fullurl"
								:radius="15" :width="70" :height="70"></u-image>
						</view>
						<view v-if="zitem.files.filename" style="margin-top: 10rpx;"
							@click.stop="handleDownload(zitem.files)">
							<u-text class="attach" prefix-icon="attach" :icon-style="{color: '#4871C0'}" color="#4871C0"
								:text="zitem.files.filename" style="word-break: break-all;"></u-text>
						</view>
					</view>
				</view>
			</view>
			<u-empty v-if="!list2.length && !isLoading" mode="data" icon="http://cdn.uviewui.com/uview/empty/car.png">
			</u-empty>
		</view>

	</view>
</template>

<script>
	import {
		getweeklist,
		getplanlistslist
	} from '@/api/feedbackApi.js'
	import UTabs from "../../uni_modules/uview-ui/components/u-tabs/u-tabs";
	import UTabsItem from "../../uni_modules/uview-ui/components/u-tabs-item/u-tabs-item";
	import UCollapse from "../../uni_modules/uview-ui/components/u-collapse/u-collapse";
	import UCollapseItem from "../../uni_modules/uview-ui/components/u-collapse-item/u-collapse-item";
	import UAvatar from "../../uni_modules/uview-ui/components/u-avatar/u-avatar";
	import UImage from "../../uni_modules/uview-ui/components/u--image/u--image";
	import UButton from "../../uni_modules/uview-ui/components/u-button/u-button";
	import UDivider from "../../uni_modules/uview-ui/components/u-divider/u-divider";
	import UText from "../../uni_modules/uview-ui/components/u--text/u--text";
	export default {
		name: "feedback",
		components: {
			UText,
			UDivider,
			UButton,
			UImage,
			UAvatar,
			UCollapseItem,
			UCollapse,
			UTabsItem,
			UTabs
		},
		data() {
			return {
				isLoading: true,
				navTitle: '周反馈',
				tabs: [{
					title: '周反馈'
				}, {
					title: '周计划'
				}, ],
				currentTab: 0,
				activeStyle: {
					color: '#4871c0'
				},
				inactiveStyle: {
					color: '#8b8b8b'
				},
				avatar: {
					url: 'https://cdn.uviewui.com/uview/album/1.jpg'
				},
				list1: [],
				list2: [],
				id: '',
				type: ''
			}
		},
		onLoad(option) {
            this.id = option.id
		},
		onShow() {
			this.getData1()
		},
		methods: {
			toDetail(bumenid) {
				console.log("=========stopPropagation", bumenid)
				uni.navigateTo({
					url: '/pages/feedback/feedback-aginedit?id=' + this.id + '&department_id=' + bumenid
				});
			},
			// 点击附件预览
			handleDownload(item) {
				console.log("=====item", item)
				let params = {
					url: item.fullurl, // 需要预览文件的地址(必填，可以使用相对路径)
					name: item.filename, // 需要预览文件的文件名(不填的话取url的最后部分)
					size: item.filesize, // 需要预览文件的字节大小(必填)
					type: item.mimetype
				}
				this.$store.dispatch('yulan', params)
			},
			getData1() {
				this.isLoading = true;
				let params = {
					meet_id: this.id,
					type: this.type
					// type: 'last_feedback'
				};
				getweeklist(params).then(res => {
					this.isLoading = false;
					this.list1 = res.data;
				})
			},
			getData2() {
				this.isLoading = true;
				let params = {
					meet_id: this.id,
					type: this.type
					// type: 'last_plan'
				};
				getplanlistslist(params).then(res => {
                    console.log(res,'...');
                    this.isLoading = false;
					if (res.code === 1) {
						this.list2 = res.data.data;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1000
						});
					}
				})
			},
			rightClick() {
				if (this.navTitle == '周反馈') {
					this.type = "last_feedback"
					this.getData1()
				} else {
					this.type = "last_plan"
					this.getData2()
				}

			},
			tabChanged(index) {
				this.currentTab = index.index;
				this.type = ''
				this.navTitle = index.index === 0 ? '周反馈' : '周计划'
				if (this.currentTab == 0) {
					this.getData1()
				} else {
					this.getData2()
				}
			},
			leftClick() {
				uni.navigateTo({
					url: '/pages/tabbar-1-detial/meetingDetails/meetingDetails?id=' + this.id
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	$font-color: #4871c0;

	.page {
		background: #F8F8F8;

		.tabs {
			align-items: center;

			/deep/.u-tabs__wrapper {
				width: 100%;
			}
		}

		.feedback {
			.collapse {
				/deep/.u-collapse-item__content__text {
					padding: 0;
				}

				/deep/.u-divider {
					margin: 8px 12px;
				}

				.label {
					color: $font-color;
					padding: 8px 12px;
					font-size: 26rpx;
					background-color: #F1F6FF;
				}

				.head {
					font-weight: bold;
					font-size: 15px;
					margin: 12px;
				}

				.content {
					margin: 12px;

					* {
						color: #666;
					}

					.file-box {
						margin: 20rpx 0;
						padding: 20rpx;
						background: #F8F9FC;
						border-radius: 16rpx;
						opacity: 1;
						font-size: 28rpx;
						font-weight: 500;
						display: flex;

						.file-content {
							color: #4871C0 !important;
						}
					}
				}
			}
		}

		.plan {
			padding: 15px;

			.date {}

			.card {
				border-radius: 10px;
				margin: 20px 0;
				padding: 10px;
				background-color: #FFFFFF;

				.account {
					display: inline-flex;
					align-items: center;
					margin-bottom: 10px;

					.name {
						margin-left: 10px;
					}
				}

				.content {
					display: contents;

					* {
						line-height: 30px;

						.content-label {
							color: #8b8b8b;
							margin-right: 8px;
						}

						.attach {
							padding: 8px;
							background-color: #ebf2fd;

							/deep/ .u-text__prefix-icon {
								margin-right: 8px;
								color: #4871C0 !important;
							}
						}
					}

					.image {
						display: inline-flex;

						* {
							margin-right: 10px;
						}
					}
				}

				.btns {
					display: flex;
					width: fit-content;
					margin-left: auto;

					.btn {
						margin-left: 10px;
						border-radius: 10px;
						padding: 0 20px;
					}
				}
			}
		}
	}

	/deep/ .u-navbar__content__right__text {
		color: white;
	}

	.attach {
		width: 95%;

	}

	/deep/.collapse_items {
		background: #fff !important;
		margin-top: 10px;
		border-bottom: none;
	}

	.topnavs {
		background: #fff;
	}

	/deep/.collapse_items .u-line {
		border: 0 !important;
	}

	/deep/.collapse_items .opcity_show .u-line {
		border-bottom: 1px solid rgb(214, 215, 217) !important;
	}

	.content_jihua {
		position: relative;

		.editbutton {
			position: absolute;
			top: 10px;
			right: 10px;
		}
	}

	.red {
		color: #ff4949;
	}
</style>
